import QtQuick 2.7
import QtQuick.Controls 2.3
import  Quick.UIComponent.Text.Normal  0.1
import  Quick.UIComponent.ViewComponet.ListView.HighLightBar  0.1 as HighLight


Rectangle{
    id:root

    implicitHeight: 80
    implicitWidth: 630
    radius: 10
    opacity: 0.7
    color: "#615E5E"

    property var   model: []
    property alias currentIndex:listV.currentIndex

    property string displayText: model[currentIndex]


    ListView{
        id:listV
        anchors.fill: parent
        model: root.model
        spacing: 10
        interactive: false
        orientation:ListView.Horizontal
        delegate: Item{
            width: (root.width - (listV.count-1)*listV.spacing)/(listV.count)
            height: root.height
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    listV.currentIndex = index
                }
            }
            MText {
                id:value
                pxSize: 26
                anchors.centerIn: parent
                text: modelData
                textColor: "black"
            }
        }
        highlight: highlightBar
    }

    Component{
        id:highlightBar
        HighLight.HighLightBar{
            color: "white"
            width: (root.width - (listV.count-1)*listV.spacing)/(listV.count)
            radius: 20
            height: root.height
        }
    }

}

